import React from 'react';
import { Table, Button } from 'antd';
import './index.css'
 import SubmissionModel from './SubmissionModel';
 import {withRouter } from 'react-router-dom'
import { connect } from 'react-redux'
import{ classOne ,routuOne,bindingOne} from '../../redux/classFicationg/classFication'
import { Input } from 'antd';
const Search = Input.Search;

// import JournalModel from './JournalModel'
// import InstModel from './InstModel'


@withRouter
@connect(
    state => state,
    { classOne ,routuOne,bindingOne}
)
export default class ClassiFicationList extends React.Component{
    constructor(){
        super();
        this.state = {
            visible:false,
            visible1:false,
            page:1,
            limit:10, 
        }
    }
    componentWillReceiveProps(nextProps){
       if(nextProps.classList.addBind){
          this.props.history.push('/menuList/classList/'+this.props.match.params.id)
       }
    }
    componentDidMount(){
      console.log(this.props.match.params.id)
      this.props.routuOne(this.props.match.params.id,this.state.page,this.state.limit,'')
    }
    onSearchs(){
      let value = document.getElementById('changyong').value
      this.props.routuOne(this.props.match.params.id,this.state.page,this.state.limit,value)
      // this.props.fullCapacity(this.state.page,this.state.limit,1,'',value);
  }
    // showModel(){
    //     this.setState({
    //         visible : !this.state.visible
    //     })
    // }
   
    addTCapacity(shipId){
      this.props.bindingOne(shipId,this.props.match.params.id,)
          // this.setState ({
          //   visible : !this.state.visible
          // })
    }
    render() {
      let shipsList = this.props.classList.shipsList
        const columns = [ {
            title: '当前分类',
            dataIndex: 'classificationName',
            align:'center'
          },{
            title: '船名',
            dataIndex: 'shipName',
            align:'center'
          },{
            title: '吨位',
            dataIndex: 'tonnage',
            width:100,
            align:'center'
          },{
              title: '实时位置',
              dataIndex: 'address',
              align:'center'
            },{
              title: '运输状态',
              dataIndex: 'sailingState',
              align:'center'
            },{
              title: '操作',
              width:300,
              align:'center',
              render:(text, record, index)=>
                  <div >
                       <Button onClick={this.addTCapacity.bind(this,record.shipId)} style={{color:'#0978E9',border:'solid 1px #0978E9',backgroundColor:'#F1F4FA',fontSize:'15px'}}>认证并添加到运力</Button>
                  </div>
            }];
            const rowSelection = {
                onChange: (selectedRowKeys, selectedRows) => {
                console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
                },
            
            };
        return (
        <div>
           <div style={{overflow:'hidde',width:'20%',paddingBottom:'5px',paddingTop:'5px'}}>
            <Search
                placeholder="搜索输入船名"
                id="changyong"
                onSearch={ this.onSearchs.bind(this)}
                enterButton
                />
                
            </div>
            <div>
            <Table rowSelection={rowSelection}
             columns={columns} 
             dataSource={!shipsList ? '' : shipsList} />
             </div>
           
             {/* <SubmissionModel visible = {this.state.visible} showModel = {this.showModel.bind(this)} /> */}
             {/* <AddClassModel visible = {this.state.visible1} showModel = {this.showModel1.bind(this)}/> */}
             {/* <ExtractModel visible = {this.state.visible} showModel = {this.showModel.bind(this)}/>
             <JournalModel visible1 = {this.state.visible1} showModel1 = {this.showModel1.bind(this)}/>
             <InstModel visible2 = {this.state.visible2} showModel2 = {this.showModel2.bind(this)}/> */}
        </div>
    )
    }
}